<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的工具集</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#FF7D00',
                        neutral: '#1F2937',
                        warning: '#F59E0B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-smooth {
                transition: all 0.3s ease-in-out;
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 页面标题 -->
        <header class="text-center mb-12">
            <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-neutral mb-2">
                <i class="fa fa-cubes text-primary mr-3"></i>我的工具集
            </h1>
            <p class="text-gray-600 text-lg">实用工具导航页</p>
        </header>
        
        <!-- 工具卡片区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <!-- 世萌数据统计工具 -->
            <a href="01/世萌数据统计.html" class="bg-white rounded-xl shadow-lg p-6 card-hover">
                <div class="flex items-center mb-4">
                    <div class="bg-primary/10 p-3 rounded-full mr-4">
                        <i class="fa fa-bar-chart text-primary text-2xl"></i>
                    </div>
                    <h2 class="text-xl font-bold text-neutral">世萌数据统计工具</h2>
                </div>
                <p class="text-gray-600 mb-4">统计文本中被[[]]标记的内容出现频率，支持Voter ID检测和结果导出。</p>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">数据分析工具</span>
                    <span class="text-primary">
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </a>
            
            <!-- Jupyter转Markdown工具 -->
            <a href="02/ipynb转化为md(网页版).html" class="bg-white rounded-xl shadow-lg p-6 card-hover">
                <div class="flex items-center mb-4">
                    <div class="bg-accent/10 p-3 rounded-full mr-4">
                        <i class="fa fa-book text-accent text-2xl"></i>
                    </div>
                    <h2 class="text-xl font-bold text-neutral">Jupyter转Markdown工具</h2>
                </div>
                <p class="text-gray-600 mb-4">将Jupyter Notebook (.ipynb)文件转换为Markdown格式，支持本地文件和URL导入。</p>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">文档转换工具</span>
                    <span class="text-accent">
                        <i class="fa fa-arrow-right"></i>
                    </span>
                </div>
            </a>
        </div>
        
        <!-- 打赏区域 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="md:w-2/3">
                    <h2 class="text-xl font-bold text-neutral mb-4">支持作者</h2>
                    <p class="text-gray-600 mb-4">如果我的工作对你有所帮助，可以打赏我杯奶茶吗？</p>
                    <p class="text-gray-600">如有类似的脚本定制需求可以联系我：<br>QQ: 2732835242</p>
                </div>
                <div class="md:w-1/3 flex justify-center">
                    <img 
                        src="alipay.jpg" 
                        alt="打赏二维码" 
                        class="w-48 h-48 object-contain border border-gray-200 rounded-lg p-2"
                    >
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="text-center text-gray-500 text-sm">
            <p>© 2025 我的工具集 | 设计与开发</p>
        </footer>
    </div>
</body>
</html>